<template>
  <section class="content">
    <Panel :expandable="false" :expanded="true" color="#67C23A">
      <template slot="title">备案订单查询</template>
      <template slot="body">
        <el-form class="search-form">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单编号:" label-width="120px">
                <el-input v-model="orderNum" placeholder="请输入订单编号" style="width:350px"></el-input>
              </el-form-item>
              <el-form-item label="申报类型:" label-width="120px">
                <el-select v-model="orderType" class="select-item-bix" placeholder="请选择店铺账号" style="width: 350px">
                  <el-option label="全部" value="-1"></el-option>
                  <el-option label="非9610报关单模式" value="0"></el-option>
                  <!--<el-option label="非9610物流单模式" value="2"></el-option>-->
                  <el-option label="9610模式" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="0">
              <el-form-item label="订单日期:" label-width="120px">
                <el-date-picker
                  v-model="addForm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="full-cell"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 400px !important;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="备案日期:" label-width="120px">
                <el-date-picker
                  v-model="recordDate"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="full-cell"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 400px !important;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label-width="30px">&nbsp;
              </el-form-item>
              <el-form-item label-width="30px">
                <el-button type="success" @click="getrecordList" v-if="$_has('sys:record:search')">查 询</el-button>
                <el-button type="info" @click="resetOrder">重 置</el-button>
                <el-button type="primary" style="background-color: #409EFF" @click="visible=true">申请备案</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </Panel>


    <Panel :expandable="false" :expanded="true" :hasTitle="false">
      <template slot="body">
        <div class="clear-fix" style="margin-bottom: 20px;">
          <el-button @click="chooseStatus(0)" :class="plain === 0?'':'is-plain'" type="primary">全部 ({{ustomsDeclarationCount.all}})</el-button>
          <el-button @click="chooseStatus(1)" :class="plain === 1?'':'is-plain'" type="warning">提交成功待审核 ({{ustomsDeclarationCount.one}})</el-button>
          <el-button @click="chooseStatus(2)" :class="plain === 2?'':'is-plain'" type="success">审核通过 ({{ustomsDeclarationCount.two}})</el-button>
          <el-button @click="chooseStatus(-2)" :class="plain === -2?'':'is-plain'" type="danger">审核未通过 ({{ustomsDeclarationCount.nTwo}})</el-button>
          <el-button @click="chooseStatus(-1)" :class="plain === -1?'':'is-plain'" type="danger">提交失败 ({{ustomsDeclarationCount.nOne}})</el-button>
          <!--<el-button @click="chooseStatus(5)" :class="plain === 5?'':'is-plain'" type="success">校验成功 (0)</el-button>-->
          <!--<el-button @click="chooseStatus(6)" :class="plain === 6?'':'is-plain'" type="danger">校验失败 (0)</el-button>-->
          <!--<a v-for="(statusBtn,index) in statusBtns" class="btn btn-sm m-r-10 min-width" :class="[statusBtn.cssName,{'btn-info':index == activeIndex},{'text-white':index == activeIndex}]" @click="chooseStatus(index, statusBtn.statusValue)">{{statusBtn.statusName}}</a>-->
        </div>
        <el-table :data="customsDeclarationList" header-row-class-name="header-class">
          <el-table-column prop="orderId" label="订单编号" align="center">

          </el-table-column>
          <el-table-column prop="orderCreated" label="订单日期" align="center">

          </el-table-column>
          <el-table-column prop="orderType" label="申报类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.orderType == 1">9610模式</span>
              <span v-if="scope.row.orderType == 2">非9610物流单模式</span>
              <span v-if="scope.row.orderType == 0">非9610报关单模式</span>
            </template>
          </el-table-column>
          <el-table-column prop="recordTime" label="备案日期" align="center">

          </el-table-column>
          <el-table-column prop="recordStatus" label="备案状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.recordStatus == 1" style="color: #FF9328">提交成功待审核</span>
              <span v-if="scope.row.recordStatus == 2" style="color: #67C23A">审核通过</span>
              <span v-if="scope.row.recordStatus == -2" style="color: #F56C6C">审核未通过</span>
              <span v-if="scope.row.recordStatus == -1" style="color: #F56C6C">提交失败</span>
              <span v-if="scope.row.recordStatus == -3" style="color: #F56C6C">校验失败</span>
              <span v-if="scope.row.recordStatus == 3" style="color: #67C23A">校验成功</span>
            </template>
          </el-table-column>
          <el-table-column prop="recordMsg" label="说明" align="center">
            <template slot-scope="scope">
              {{scope.row.recordMsg ? scope.row.recordMsg : '-'}}
            </template>
          </el-table-column>

          <el-table-column prop="orderCreated" label="操作" align="center">
            <template slot-scope="scope">
              <img src="@/assets/record.png" style="width: 24px; height: 24px; margin-right: 5px" v-if="scope.row.recordStatus == -3" @click="recordingReview(scope.row.orderId)"/>
              <div v-else style="width: 20px;float:left; margin-right: 5px">&nbsp;</div>
              <img src="@/assets/record-new.png" style="width: 24px; height: 24px; margin-right: 5px" v-if="scope.row.recordStatus == -2 || scope.row.recordStatus == -1 || scope.row.recordStatus == 0 " @click="recordingReview(scope.row.orderId)"/>
              <div v-else style="width: 20px;float:left; margin-right: 5px">&nbsp;</div>
              <img src="@/assets/look.png" style="width: 20px; height: 20px;" @click="detailVisible=true;orderId=scope.row.orderId"/>
            </template>
          </el-table-column>
        </el-table>
        <div class="clear-fix">
          <el-pagination
            style="float: right; margin-top: 20px;"
            background
            layout="total, prev, pager, next"
            @current-change="pagechange"

            :current-page="pages.current"
            :total="pages.total">
          </el-pagination>
        </div>
      </template>
    </Panel>


    <transition name="fade">
      <div v-if="errorShow" class="gritter-notice-wrapper " :class="{'success-notice-wrapper':errorClass}">
        <div id="gritter-item-4" class="gritter-item-wrapper gritter-error" style="" role="alert">
          <div class="gritter-item"><a class="gritter-close" tabindex="1" @click="closeError"><i
            class="fa fa-close"></i></a>
            <div class="gritter-without-image"><span class="gritter-title">{{errorTitle}}</span>
              <p>{{errorMsg}}</p></div>
          </div>
        </div>
      </div>
    </transition>

    <div class="loading" v-if="dialogFormVisible">
      <span>
        <!--<i class="el-icon-loading"></i>-->
        <img src="@/assets/loading.gif" alt="">
      <p>
        备案中...
      </p>
      </span>
    </div>

    <el-dialog title="提交备案查询" :visible.sync="visible" width="80%">
      <Record v-if="visible" @commited="handleCommited" :declareType="activeName"></Record>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="订单详情" :visible.sync="detailVisible" width="80%">
      <RecordDetailPage v-if="detailVisible" @commited="handleDetailCommited" :orderId="orderId"></RecordDetailPage>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
  import pagination from '@/components/common/pageComponent'
  import instance from '@/api/index.js'
  import Panel from '@/components/common/panel'
  import Record from './record'
  import RecordDetailPage from './recordDetailPage'
  export default {
    name: "recordManagement",
    data(){
      return{
        statusBtns: [
          {
            "statusValue": "0",
            "statusName": "全部",
            "cssName":"btn-default text-primary"
          },
          {
            "statusValue": "1",
            "statusName": "提交成功待审核",
            "cssName":"btn-default text-green"
          },
          {
            "statusValue": "3",
            "statusName": "审核通过",
            "cssName":"btn-default text-blue"
          },
          {
            "statusValue": "-3",
            "statusName": "审核未通过",
            "cssName":"btn-default text-red"
          },
          {
            "statusValue": "-1",
            "statusName": "提交失败",
            "cssName":"btn-default text-red"
          },
          {
            "statusValue": "2",
            "statusName": "校验成功",
            "cssName":"btn-default text-green"
          },
          {
            "statusValue": "-2",
            "statusName": "校验失败",
            "cssName":"btn-default text-red"
          }
        ],
        activeIndex:0,
        show:false,//loading
        pages:{
          current:1,//当前页
          display:10,//每页显示多少条数据
          total:0,//总条数
        },
        star:'',
        end:'',
        allList:[],
        customsDeclarationList:[],//获取报关单备案列表
        ustomsDeclarationCount:{all: 0, one: 0, nOne: 0, nTwo: 0, two: 0},
        recordPamas:{},
        addForm:[],//开始日期结束日期
        recordDate:[],
        errorShow: false,//错误显示
        errorMsg: '',//错误信息
        errorTitle: '',//错误提示标题
        errorClass: false,//错误样式
        orderNum:'',//订单编号
        dialogFormVisible:false,
        status:[],
        orderType: '-1',
        activeName: 'first',
        visible: false,
        detailVisible: false,
        orderId: '',
        plain: 0,
      }
    },
    methods:{

      // 提交完成
      handleDetailCommited(msg) {
        this.visible = false;
      },
      // 提交完成
      handleCommited(msg) {
        this.visible = false;
        if(msg === false) {
          // do nothing
        } else {
          this.$message.success(msg || "操作成功！");
        }
        this.getrecordList();
      },
      // 获取分页
      pagechange: function (currentPage) {
        this.pages.current = currentPage;
        this.recordPamas.page = currentPage;
        this.getrecordStatusList();
        // this.getrecordList();
        // this.customsDeclarationList = this.allList.slice((currentPage-1)*10,currentPage*10);
      },

      getrecordStatusList:function(){
        let vm = this;
        vm.recordPamas.orderId = vm.orderNum;
        vm.recordPamas.begin = this.addForm[0];
        vm.recordPamas.end = this.addForm[1];
        vm.recordPamas.recordBegin = this.recordDate[0];
        vm.recordPamas.recordEnd = this.recordDate[1];
        vm.recordPamas.page = this.pages.current;
        if(this.orderType && this.orderType != '-1'){
          this.recordPamas.orderType = this.orderType;
        }else {
          delete this.recordPamas.orderType
        }

        instance({
          method:'post',
          url:'/v1/declare/record/list',
          data:vm.recordPamas
        }).then(function (data) {
          console.log(data)
          if(data.data.success){
            vm.customsDeclarationList = data.data.data.list;
            vm.pages.total = data.data.data.total
            console.log(data)
          }
        })
      },

      //获取备案列表数据
      getrecordList:function(){
        let vm = this;
        vm.recordPamas.orderId = vm.orderNum;
        if(this.addForm && this.addForm.length>1){
          vm.recordPamas.begin = this.addForm[0];
          vm.recordPamas.end = this.addForm[1];
        }
        if(this.recordDate && this.recordDate.length>1) {
          vm.recordPamas.recordBegin = this.recordDate[0];
          vm.recordPamas.recordEnd = this.recordDate[1];
        }
        vm.recordPamas.page = this.pages.current;
        if(this.orderType && this.orderType != '-1'){
          this.recordPamas.orderType = this.orderType;
        }else {
        this.orderType = '-1'
          delete this.recordPamas.orderType
        }
        delete this.recordPamas.status
        this.plain = 0;

        this.getrecordStatusList();

        instance({
          method:'post',
          url:'/v1/declare/record/count',
          data:vm.recordPamas
        }).then(function (data) {
          console.log(data)
          if(data.data.success){
            vm.ustomsDeclarationCount = data.data.data;
          }
        })
      },

      //重置
      resetOrder:function(){
        for (let key in this.recordPamas){
          this.recordPamas[key] = '';
        }
        // this.plain = 0;
        delete this.recordPamas.status;
        this.recordPamas.page = 1;
        this.activeIndex = 0;
        this.orderNum = '';
        this.addForm = [];
        this.recordDate = [];
        this.orderType = '-1';
        this.pages.current = 1;
        // this.customsDeclarationList = [];
      },

      //重新备案
      recordingReview:function(_id){
        let vm = this;
        vm.dialogFormVisible = true;
        instance({
          method:'post',
          url:'/v1/declare/recordation',
          data:{
            orderId:_id
          }
        }).then(function (data) {
          console.log(data)
          if(data.data.success){
            console.log(data)
            vm.getrecordList();
            vm.dialogFormVisible = false;
          }else {
            vm.dialogFormVisible = false;
            vm.$message.error(data.data.msg)
          }
        })
      },

      //添加样式
      chooseStatus:function (index) {
      // chooseStatus:function (index,_status) {
        if(index && index != 0){
          this.recordPamas.status = index;
        }else {
          delete this.recordPamas.status
        }
        // this.status = parseInt(_status);
        this.plain = index;
        this.getrecordStatusList();
        this.activeIndex = index;
      },

      getSTime:function(val){
        this.addForm.starTime = val;
      },
      getETime:function(val){
        this.addForm.endTime = val;
      },

      //筛选订单
      screeningOrder:function(){
        this.star = $("#datepickerstar").val();
        this.end = $("#datepickerend").val();
        console.log(this.star,this.end)
      },

      //定时信息提示
      setTime: function () {
        let vm = this;
        setTimeout(function () {
          vm.errorShow = false;
        }, 2500)
      },

      //关闭信息提示
      closeError: function () {
        this.errorShow = false;
      },

      //测试
      // addList:function () {
      //   for (let i = 0; i < 100; i++){
      //     let obj = {};
      //     obj.time = i+1;
      //     this.allList.push(obj)
      //   }
      //   this.customsDeclarationList = this.allList.slice(0,10);
      //   this.pages.total = 100;
      // }
    },
    created(){
      // this.addList();
      this.getrecordList();
    },
    components: {
      pagination,
      Panel,
      Record,
      RecordDetailPage
    }
  }
</script>

<style scoped>
  .linehe > input{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-input__inner{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-input__icon{
    line-height: 34px!important;
  }
  .loading{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    z-index: 99999;
  }
  .loading span{
    position: fixed;
    display: block;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    font-size: 55px;
    color: #333;
    text-align: center;
  }
  .loading span p{
    font-size: 24px;
    color: #333;
  }
</style>
